
<template>
<div>
   <el-row type="flex" class="row-bg2" justify="space-around">
        <el-col :span="3"></el-col>
        <el-col :span="18">
          输入物品名称
          <br>
          <el-input style="width:50%" v-model="title"  placeholder="请输入内容"></el-input>
          <br>
          <br>
          <br>
          <br>
          上传物品图片
      <br>
      <input id="categoryPic" style=" outline-style: none ; " accept="image/*" type="file" name="image" @change="getimage($event)">

      <br>
      <br>
      输入图片X,Y偏移量(输整数，小数无效;)
      <br>
       <el-input style="width:20%" v-model="xmove"  placeholder="X总长580"></el-input>
       <el-input style="width:20%" v-model="ymove"  placeholder="Y总长711"></el-input>
      <br><br><br><br><br>
          请输入内容
          <br>

        <el-input
        style="width:80%"
          type="textarea"
          :rows="6"
          placeholder="如要分行，可打回车"
          v-model="textarea">
        </el-input>
        <br>
        <br>
        <br> <br> <br>
            <!-- <br><br><br><br><br>
                  署名
          <br>
          <el-input style="width:50%" v-model="name"  placeholder="请输入内容"></el-input> -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" @click="update()">制作</el-button>
        </el-col>
        <el-col :span="3"></el-col>

      </el-row>

       <el-row type="flex" class="row-bg2" justify="space-around">
        <el-col :span="18">
          <el-image
            style="padding-top:30px;width:80%;height:80%"
            :src="url"></el-image>
            <br>
             <el-button type="primary" @click="clickup()">上传</el-button>
             <el-dialog  :visible.sync="dialogFormVisible" width="30%">
              <el-form >
                <el-form-item label="署名" >
                  <el-input v-model="formname"  autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="keep()">确 定</el-button>
              </div>
            </el-dialog>

        </el-col>
      </el-row>
</div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      url: 'http://yxmdkzsh.icu/1234.jpg',
      input: '',
      searchCriteria: '',
      name: '',
      file: '',
      textarea: '',
      title: '',
      xmove: '210',
      ymove: '80',
      dialogTableVisible: false,
      dialogFormVisible: false,
      formname: ''
    }
  },

  methods: {
    keep () {
      this.dialogFormVisible = false
      this.axios.post('/keep?str=' + this.url + '!' + this.formname).then(res => {
        window.console.log(res)
        alert('上传成功')
      })
    },
    clickup () {
      // this.dialogFormVisible = true
      var that = this
      if (this.url === 'http://yxmdkzsh.icu/1234.jpg') {
        alert('你还没做呢小傻逼')
      } else {
        that.dialogFormVisible = true
      }
    },
    getimage (e) {
      this.file = event.target.files[0]
    },
    update () {
      var that = this
      if (that.title && that.file && that.xmove && this.ymove && this.textarea) {
        var url = 'acceptimage' + '/'
        var formdata = new FormData()
        formdata.append('title', this.title)
        formdata.append('image', this.file)
        formdata.append('xmove', this.xmove)
        formdata.append('ymove', this.ymove)
        formdata.append('text', this.textarea)
        // formdata.append('name', this.name)

        this.axios.put(url, formdata).then(function (response) {
          window.console.log(response)
          if (response.status === 200) {
            that.url = response.data
          }
        })
      } else {
        alert('请输入完全')
      }
    }

  }
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg2 {
    height: 90% !important;
    padding: 20px 0;
    background-color: #f9fafc;
  }
</style>
